import React, { useEffect, useRef } from 'react'
import * as CesiumJS from 'cesium'
import styles from './cesium.module.css'

// 设置 Cesium 的默认访问令牌（如果没有可设为空字符串）
// CesiumJS.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_TOKEN'; // 可选
CesiumJS.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMDYxMTZlZS00YzAyLTQxNzgtYjQ4ZS04MDdlYzQ4MjlkM2MiLCJpZCI6MzYwNjY1LCJpYXQiOjE3NjMyMTY3OTR9.z3JNPk_CH8xX-lO25RQjfItrByWG-oVvDPFFv5T1WfQ'

const Cesium = () => {
  const cesiumRef = useRef(null)
  useEffect(() => {
    const initializeCesium = () => {
      try {
        const viewer = new CesiumJS.Viewer('cesiumContainer', {
          shouldShowHelpButton: false, // 隐藏帮助按钮
          animation: false, // 隐藏动画控件
          timeline: false, // 隐藏时间线
          fullscreenButton: false, // 隐藏全屏按钮（可选）
          geocoder: false, // 隐藏地理编码器（可选）
          homeButton: false, // 隐藏主页按钮（可选）
          sceneModePicker: false, // 隐藏场景模式选择器（可选）
          baseLayerPicker: false, // 隐藏基础图层选择器（可选）
          navigationHelpButton: false,
        })

        cesiumRef.current = viewer
      } catch (error) {
        console.error('Cesium initialization error:', error)
      }
    }

    // 确保 DOM 已经渲染完成
    setTimeout(initializeCesium, 100)

    //组件卸载时清空
    return () => {
      if (cesiumRef.current) {
        //判断是否为空
        cesiumRef.current.destroy()
      }
    }
  }, [])

  return (
    <div>
      <div id="cesiumContainer" className={styles.cesiumContainer}>
        233333
      </div>
    </div>
  )
}

export default Cesium
